<script setup>
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { addAuthByUsernameApi, getAllAuthApi, getUserAuthApi, removeAuthByUsernameApi } from '@/apis/authManagement'

const breadList = ref([{name: '成员权限管理', path: '/system/authManagement/systemAuth'}])
const tableData = ref([])
const tableLoading = ref(true)
const authAllCache = ref([])
const authAddDialogVisible = ref(false)
const authAddSelectList = ref([])
const authAddSelectValue = ref('')
const authAddRequest = ref({
  authId: null,
  username: null
})
const pageQueryRequest = ref({
  name: '',
  pageNum: 1,
  pageSize: 10
})
const pageQueryResponse = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

const getUserAuthPage = (request) => {
  tableLoading.value = true
  getUserAuthApi(request).then(({code, data}) => {
    if (code === 200) {
      tableData.value = data.dataList
      const {pageSize, pageNum, total} = data
      pageQueryResponse.value = {pageSize, pageNum, total}
    }
  }).finally(() => {
    tableLoading.value = false
  })
}

const openAddAuthDialog = ({authList, username}) => {
  authAddRequest.value.username = username
  authAddDialogVisible.value = true
  if (authAllCache.value.length !== 0) {
    const set = new Set(authList.map(a => a.authName))
    authAddSelectList.value = authAllCache.value.filter(a => !set.has(a.authName))
    return
  }
  // 缓存
  getAllAuthApi().then(({code, data}) => {
    if (code === 200) {
      authAllCache.value = data
      openAddAuthDialog({authList, username})
    }
  })
}

const addAuth = () => {
  authAddRequest.value.authId = authAddSelectValue.value
  addAuthByUsernameApi(authAddRequest.value).then(({code}) => {
    if (code === 200) {
      authAddSelectValue.value = ''
      getUserAuthPage(pageQueryRequest.value)
    }
  }).finally(() => {
    authAddDialogVisible.value = false
  })
}

const handleCurrentChange = val => {
  pageQueryRequest.value.pageNum = val
  getUserAuthPage(pageQueryRequest.value)
}

const removeAuthByUsername = ({username}, {authId}) => {
  removeAuthByUsernameApi({username, authId}).then(({code}) => {
    if (code === 200) {
      getUserAuthPage(pageQueryRequest.value)
    }
  })
}

onMounted(() => {
  getUserAuthPage(pageQueryRequest.value)
})
</script>

<template>
  <el-breadcrumb separator="/" style="margin-bottom: 20px">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <template v-for="(item, index) in breadList">
      <el-breadcrumb-item v-if="item.name" :key="index" :to="item.path">{{ item.name }}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>

  <el-row :gutter="20">
    <el-col :span="4">
      <el-input v-model="pageQueryRequest.name" placeholder="请输入姓名搜索" />
    </el-col>
    <el-col :span="1.5">
      <el-button type="primary" :icon="Search" @click="getUserAuthPage(pageQueryRequest)">搜索</el-button>
    </el-col>
  </el-row>

  <el-table
      v-loading="tableLoading"
      ref="multipleTableRef"
      :data="tableData"
      height="580"
      style="margin-top: 24px;"
      stripe
  >
    <el-table-column property="aliasName" label="中文花名" width="120" />
    <el-table-column property="name" label="姓名" width="140" />
    <el-table-column property="role" label="角色" width="200" />
    <el-table-column property="workGroup" label="工作组" width="160" />
    <el-table-column property="authList" label="权限集">
      <template #default="scope">
        <el-tag
            v-for="(p, index) in scope.row.authList"
            :key="index"
            closable
            round
            :disable-transitions="false"
            @close="removeAuthByUsername(scope.row, p)"
            style="margin: 4px 8px"
        >
          {{ p.authName }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button type="primary" size="small" @click="openAddAuthDialog(scope.row)">
          添加权限
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="pageQueryResponse.total"
                 @current-change="handleCurrentChange" />

  <el-dialog
      v-model="authAddDialogVisible"
      title="添加权限"
      width="500"
      align-center
  >
    可添加权限：&ensp;&ensp;&ensp;&ensp;
    <el-select
        v-model="authAddSelectValue"
        placeholder="请选择要添加的权限"
        size="default"
        style="width: 240px"
    >
      <el-option
          v-for="item in authAddSelectList"
          :key="item"
          :label="item.authName"
          :value="item.id"
      />
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="authAddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addAuth">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">

</style>